@import "../base/reset";
@import "../base/typography";
@import "../base/colors";

#toolbar {
  &:extend(.system-font);
  height: 74px;
  background: #e8e8e8;

  .toolbar-group {
    padding: 0 4px;
    display: flex;
    height: 29px;
  }
}

body.page-fullscreen #toolbar {
  display: none;
}

body.fullscreen #toolbar {
  background: #e0e0e0;
}

.download-started-animation {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 32px;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 20px 30px;
  border-radius: 10px;

  a {
    color: #0091ff;
  }
}

.window-blurred {
  // when the window isnt focused, lighten the toolbar
  #toolbar {
    background: @background-shell-window--unfocused;

    .chrome-tabs .chrome-tab.chrome-tab-add-btn:before,
    .chrome-tabs .chrome-tab.chrome-tab-add-btn:after,
    .chrome-tabs .chrome-tab.chrome-tab-add-btn .chrome-tab-bg {
      display: none;
    }

    .toolbar-input-group .toolbar-site-info button .fa,
    .toolbar-input-group .toolbar-site-info button .title,
    .toolbar-input-group .nav-location-pretty .protocol,
    .toolbar-actions input,
     {
      color: gray;
    }
  }
}

